<template>
  <div>
    <h2>我想要2022-12-1到2023-2-1的日期</h2>
    <el-button @click="getAll('2023-01-01','2023-03-01')">获取</el-button>
    <div id="myChart" style="width: 1199px; height: 361px">

    </div>
  </div>
</template>

<script>
export default {
  name: "insertTime",
  data(){
    return{
      intervalTime:[
        {price:"180",time:'02-18 14:31'},
        {price:"160",time:'02-18 15:31'},
        {price:"140",time:'02-18 16:31'},
        {price:"120",time:'02-18 17:31'},
        {price:"120",time:'02-18 18:31'},
        {price:"120",time:'02-18 19:31'},
      ],
      xTime:[],
      yPrice:[]
    }
  },
  mounted() {
    var a = this.intervalTime
    for (let i=0;i<a.length;i++){
      this.xTime.push(a[i].time)
      this.yPrice.push(a[i].price)
    }
    console.log(this.xTime)
    console.log(this.yPrice)
    this.getChart()
  },
  methods:{
    getAll (day1, day2) {
      var getDate = function (str) {
        var tempDate = new Date();
        var list = str.split("-");
        tempDate.setFullYear(list[0]);
        tempDate.setMonth(list[1] - 1);
        tempDate.setDate(list[2]);
        return tempDate;
      }
      var date1 = getDate(day1);
      var date2 = getDate(day2);
      if (date1 > date2) {
        var tempDate = date1;
        date1 = date2;
        date2 = tempDate;
      }
      date1.setDate(date1.getDate() + 1);
      var dateArr = [];
      var i = 0;
      while (!(date1.getFullYear() === date2.getFullYear()
          && date1.getMonth() === date2.getMonth() && date1.getDate() === date2
              .getDate())) {
        var dayStr = date1.getDate().toString();
        if (dayStr.length === 1) {
          dayStr = "0" + dayStr;
        }
        var monthStr = (date1.getMonth() + 1).toString();
        if (monthStr.length === 1) {
          monthStr = "0" + monthStr;
        }
        var time = {}
        time.time = date1.getFullYear() + "-" + monthStr + "-"
            + dayStr;
        time.value = 0;
        dateArr[i] = time
        i++;
        date1.setDate(date1.getDate() + 1);
      }
      var time1 = {}
      time1.time = day1;
      time1.value = 0;
      var time2 = {}
      time2.time = day2;
      time2.value = 0;
      dateArr.splice(0, 0, time1)
      dateArr.push(time2);
      console.log(dateArr);
      return dateArr;
    },
    getChart(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'V字拍卖'
        },
        xAxis:{
          type: 'category',
          // data: this.xTime,
          data: this.xTime.map((str) => {
            return str.replace(' ','\n')
          }),// 横轴坐标值
          axisLabel: {
            show: true,
            color: '#033586',
            fontSize: 16
          }
        },
        yAxis: {
          type: 'value',
          min:100,
          max:300,
          axisLabel: {
            show: true,
            color: '#033586',
            fontSize: 16,
          }
        },
        series: [
          {
            data: this.yPrice,
            type: 'line',
            symbol: function (value, params) {
              console.log(params);
            },
            lineStyle:{
              color: '#033586',
            },
            itemStyle : {
              normal : {
                color:'#033586'
              }
            },
            label:{
              show:true,
              formatter:function(data){
                return data.value;
              }
            },
          }
        ]
      });
    }
  }
}
</script>

<style scoped>

</style>
